<template>
  <div class="page">

    <u-navbar>
      <view class="slot-wrap">
        <u-search placeholder="发票编号" v-model="searchForm.orderSn" @search="load" @custom="load"></u-search>
      </view>
    </u-navbar>
    <div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
      <div class="drop-list-tab">
        <u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
      </div>
      <div class="drop-list-config" @click="handleClickScreen">
        <div>
          筛选
        </div>
      </div>
    </div>
    <!-- 发票列表 -->
    <div class="global-list" v-if="receiptList.length != 0">
      <div class="global-item" @click="handleClickGoods(item)" v-for="(item,index) in receiptList" :key="index">

        <div class="flex global-top-col">
          <div class="global-sn">{{item.orderSn}}</div>
          <div class="global-orderStatus">{{item.receiptContent }}</div>
        </div>

        <div class="flex goods-item">
          <div>
            发票抬头：
          </div>
          <div class="wes-2 goods-name">{{item.receiptTitle}}</div>

          <div class="flex goods-right-col">
            <div class="goods-price">{{item.receiptStatus== 0 ? '未开票' : '已开票'}}</div>

          </div>
        </div>

        <div class="global-bottom-col flex">
          <div class="global-createTime">纳税人识别号：{{item.taxpayerId||'暂未填写'}}</div>

        </div>
        <div class="goods-follow-price">
          <div>
            发票金额：<span> ￥{{item.receiptPrice | unitPrice}}</span>
          </div>
          <div>
            订单状态：<span> {{item.orderStatus | orderStatusList}}</span>
          </div>
        </div>

      </div>
    </div>
    <u-empty text="暂无更多发票" v-else mode="order"></u-empty>

    <u-popup width='80%' mode="right" v-model="enablePopup">
      <div class="box">
        <div class="box-item">
          <div class="func-title">会员名称</div>
          <div class="func-content">
            <u-input placeholder="请输入会员名称" v-model="searchForm.memberName" :custom-style="inputStyle"></u-input>
          </div>
          <div class="func-title">发票抬头</div>
          <div class="func-content">
            <u-input placeholder="请输入发票抬头" v-model="searchForm.receiptTitle" :custom-style="inputStyle"></u-input>
          </div>
          <div class="func-title">状态</div>
          <div class="func-content">
            <div class="func-item" @click="handleClickreceiptStatusWay(item)" :class="{'active':item.selected}" v-for="(item,index) in receiptStatusWay" :key="index">
              {{item.label}}
            </div>
          </div>
        </div>
        <div class="submit" @click="load">确定</div>
        <div class="clear" @click="clear">清空</div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import { getReceiptPage } from "@/api/order";
let systemInfo = uni.getSystemInfoSync();
export default {
  components: {},
  data() {
    return {
		statusBarHeight: systemInfo.statusBarHeight,
      receiptStatusWay: [
        { value: 1, label: "已开票", selected: false },
        { value: 0, label: "未开票", selected: false },
      ],
      inputStyle: {
        background: "#f7f7f7",
        "padding-left": "20rpx",
        "border-radius": "10rpx",
      },
      enablePopup: false,
      current: 0,
      list: [
        {
          name: "发票列表",
        },
      ],
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        receiptStatus: "", // 发票状态
      },
      params: {},
      receiptList: [], //发票列表
    };
  },
  onShow() {
    this.init();
  },
  watch: {
    current(val) {
      this.receiptList = [];
      this.init();
    },
  },
  //   触底
  onReachBottom() {
    this.searchForm.pageNumber++;
    this.init();
  },
  methods: {
    // 清空回调信息
    clear() {
      this.searchForm = {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        receiptStatus: "", // 发票状态
      };
      this.receiptStatusWay.map((item) => {
        item.selected = false;
      });
      this.init();
      this.enablePopup = false;
    },
    // 点击发票状态
    handleClickreceiptStatusWay(val) {
      this.receiptStatusWay.map((item) => (item.selected = false));
      val.selected = true;
      this.searchForm.receiptStatus = val.value;
    },

    // 点击tab
    changeTabs(index) {
      this.current = index;
    },
    // 点击筛选
    handleClickScreen() {
      this.enablePopup = true;
    },
    load() {
      this.searchForm.pageNumber = 1;
      this.receiptList = [];
      this.init();
    },
    async init() {
      this.enablePopup = false;
      let res = await getReceiptPage(this.searchForm);
      if (res.data.success) {
        this.receiptList.push(...res.data.result.records);
      }
    },

   
  },
};
</script>

<style lang="scss" scoped>
@import "@/components/global.scss";
.goods-follow-price {
  > div {
    margin: 5rpx 0;

    > span {
      font-weight: bold;
      color: $main-color;
      font-size: 30rpx;
    }
  }
}
.drop-list-config {
  flex: 2 !important;
}
.box {
  padding: 34rpx;
  margin: 20rpx 0;
}
.box-title {
  font-size: 36rpx;
  color: #999;
}
.box-item {
  margin: 40rpx 0;
}

.func-content {
  display: flex;
  flex-wrap: wrap;
  margin: 20rpx 0;
}
.func-title {
  font-weight: bold;
}
.func-item {
  margin: 10rpx;
  font-size: 24rpx;
  background: #f7f7f7;
  border-radius: 10rpx;
  padding: 12rpx 20rpx;
  transition: 0.35s;
}

.active {
  background: #333;
  color: #fff;
}
/deep/ .u-btn--primary {
  border-color: #333 !important;
  background-color: #333 !important;
}
.clear,
.submit {
  border-radius: 20rpx;
  height: 70rpx;

  text-align: center;
  margin: 80rpx auto 0 auto;
  line-height: 70rpx;
}
.submit {
  background: #333;
  color: #fff;
}
.clear {
  box-sizing: border-box;
  border: 2rpx solid #333;
  color: #333;
  margin: 20rpx auto 0 auto;
}
@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner{
			height: 100rpx !important;
		}
		/deep/ .u-navbar-placeholder{
			height: 100rpx !important;
		}
	}
</style>